<!-- 督办审核单 -->
<template>
  <basic-container class="abnormalInfo treeBox table-wrapper">

    <!-- 名称、日期、数量 -->
    <h2>督办审核单</h2>
    <div class="data_title">
      <span>【公司名称】: </span>{{abnormalData.deptName || "-"}}
    </div>
    <div class="data_title">
      <span>【所属日期】: </span>{{abnormalData.reportDate || "-"}}
    </div>
    <div class="data_title abnormal_count">
      <span>【异常数量】: </span>{{abnormalData.num || 0}}个
    </div>

    <el-collapse v-model="activeNames">

      <!-- 异常清单列表 -->
      <el-collapse-item name="1">
        <template slot="title">
          <span class="data_title">【异常清单列表】</span>
        </template>

        <avue-crud 
          ref="crud" 
          :option="option"
          :data="abnormalData.abnormalInfoVOList"
          @selection-change="selectionChange">
          <template slot="menuRight">
            <el-button 
              v-if="canEdit"
              size="small" 
              type="primary" 
              icon="el-icon-edit" 
              @click="toDetails"
              :disabled="handleDisabled">
              编辑
            </el-button>
          </template>
        </avue-crud>
      </el-collapse-item>

      <!-- 督办流程 -->
      <el-collapse-item name="2">
        <template slot="title">
          <span class="data_title">【督办流程】</span>
        </template>

        <el-timeline>
          <el-timeline-item :timestamp="formatStamp(item)" placement="top" v-for="(item,index) in processList" :key="index">
            <div class="timelineBox">
              <div>{{item.comment}}</div>
              <div>
                操作人: {{item.nickName}}
                <span style="margin-left: 15px;color: #409EFF;" v-if="item.isPass==1">审核通过</span>
                <span style="margin-left: 15px;color: #409EFF;" v-if="item.isPass==0">审核驳回</span>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-collapse-item>

    </el-collapse>

    <!-- 处理内容填报 -->
    <div v-if="showComment">
      <div class="data_title"><span>【处理内容填报】</span></div>
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入内容（170字内）"
        maxlength=170
        v-model="content">
      </el-input>
      <div style="text-align: center; margin-top: 20px;">
        <el-button 
          type="primary" 
          v-if="taskKey === 'submit'"
          style="padding: 12px 40px;" 
          @click="submitTask(1)" 
          :loading="submitTaskLoading">
          提交
        </el-button>
        <el-button 
          type="primary" 
          v-if="taskKey !== 'submit'"
          style="padding: 12px 40px;" 
          @click="submitTask(1)" 
          :loading="submitTaskLoading">
          审核通过
        </el-button>
        <el-button 
          style="padding: 12px 40px;" 
          v-if="taskKey !== 'submit'"
          @click="submitTask(0)" 
          :loading="submitTaskLoading">
          审核驳回
        </el-button>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div v-if="!showComment" style="text-align: center; margin-top: 20px;">
      <el-button 
        type="primary" 
        style="padding: 12px 40px;" 
        @click="toAbnormalMonitor">
        返回
      </el-button>
    </div>

    <!-- 异常原因弹窗 -->
    <el-dialog title="异常原因" :visible.sync="dialogVisiable" :modal="false">
      <el-form class="reason_form">
        <el-radio
          v-model="reason"
          v-for="(item, index) in reasonTypeList"
          :key="index"
          :label="item.dictValue"
          @change="changeReason">
          {{ item.dictValue }}
        </el-radio>
        <el-input 
          class="other_reason"
          v-model="otherReason" 
          v-if="reason === '其他'"
          placeholder="请输入反馈内容（20字内）" 
          maxlength=20>
        </el-input>
      </el-form>
      <div style="display:flex;justify-content:center;">
        <el-button size="small" type="primary" @click="onsubmit" :loading="submitLoading">保 存</el-button>
        <el-button size="small" @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>

  </basic-container>
</template>

<script>
import { getList, getReason, editAbnormal, getAuditProcess, handleAbnormal } from "@/api/loam/abnormalReport";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      activeNames: ["1", "2"],
      abnormalData: {},
      option: {
        selection: false,
        border: true,
        index: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        dialogClickModal: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        column: [{
          label: '点位',
          prop: 'siteName',
          align: 'center'
        }, {
          label: '机组',
          prop: 'groupName',
          align: 'center'
        }, {
          label: '报警类型',
          prop: 'type',
          align: 'center',
          hide: true
        }, {
          label: '监控因子',
          prop: 'alias',
          align: 'center'
        }, {
          label: '异常值',
          prop: 'curVal',
          align: 'center'
        }, {
          label: '开始时间',
          prop: 'startTime',
          align: 'center'
        }, {
          label: '持续时间',
          prop: 'duration',
          align: 'center'
        }, {
          label: '结束时间',
          prop: 'endTime',
          align: 'center'
        }, {
          label: '企业反馈',
          prop: 'feedback',
          align: 'center'
        }]
      },
      showComment: false,
      canEdit: false,
      handleDisabled: true,
      dialogVisiable: false,
      submitLoading: false,
      submitTaskLoading: false,
      EDIT: "edit",
      VIEW: "view",
      deptInfoId: "",
      deptName: "",
      taskKey: "",
      id: "",
      processInstanceId: "",
      nodeId: "",
      type: "",
      selectionList: [],
      reason: "",
      otherReason: "",
      reasonTypeList: [],
      processList: [],
      content: ""
    };
  },
  computed: {
    ...mapGetters(["permission"])
  },
  watch: {

    // 弹窗是否可见
    dialogVisiable(val) {
      if (!val) this.selectionClear();
    }
  },

  // 页面加载函数
  mounted() {
    var query = JSON.parse(sessionStorage.getItem("abnormalReport"));
    this.type = query.type;
    this.deptInfoId = query.deptInfoId;
    this.deptName = query.deptName;
    this.taskKey = query.taskKey;
    this.nodeId = query.nodeId;
    this.id = query.id;
    this.processInstanceId = query.processInstanceId;

    if (this.type === this.EDIT) {
      this.showComment = true;
    } else if (this.type === this.VIEW) {
      this.showComment = false;
      this.canEdit = false;
      this.option.selection = false;
    }
    this.initData();
  },
  methods: {

    // 获取异常原因列表
    initData() {
      getReason().then(res => {
        if(res.data.success !== true) {
          return;
        }
				this.reasonTypeList = res.data.data;
      }).then(() => {
        if(this.processInstanceId !== "-")
          this.getProcess();
        else
          this.getAbnormalList();
      });
    },

    // 获取督办流程
    getProcess() {
      getAuditProcess(this.processInstanceId).then(res => {
        if(res.data.success !== true) {
          return;
        }
        this.processList = res.data.data;
      }).then(() => {
        this.getAbnormalList();
      });
    },

    // 获取异常清单列表
    getAbnormalList() {
      getList(this.deptInfoId, this.deptName, this.id).then(res => {
        if(res.data.success !== true) {
          return;
        }

        this.abnormalData = res.data.data;
        if(this.type === this.EDIT) {
          this.canEdit = this.abnormalData.beHandle;
          this.option.selection = this.abnormalData.beHandle;
        }
      });
    },

    // 行勾选事件
    selectionChange(list) {
      this.selectionList = list;
      this.handleDisabled = this.selectionList.length ? false : true;
    },

    // 点击编辑按钮
    toDetails() {
      this.dialogVisiable = true;
    },

    // 关闭弹窗
    closeDialog() {
      this.reason = "";
      this.otherReason = "";
      this.dialogVisiable = false;
      this.submitLoading = false;
    },

    // 清除行勾选
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },

    // 整合流程内容
    formatStamp(item){
      return item.taskName+' '+item.completeTime.replace(/T/g," ");
    },

    // 点击弹窗上保存按钮
    onsubmit() {
      if(this.reason === "") {
        this.$message.warning("请选择异常原因！");
        return;
      }
      if(this.reason === "其他" && this.otherReason === "") {
        this.$message.warning("请填写其他原因！");
        return;
      }
      
      this.submitLoading = true;
      var abnormalIds = [];
      this.selectionList.forEach(item => {
        abnormalIds.push(item.id);
      });
      var abnormalReason = "";
      this.reasonTypeList.forEach(item => {
        if(this.reason === item.dictValue) {
          abnormalReason = item.dictKey;
        }
      });
      var feedback = "";
      if(this.reason === "其他") {
        feedback = this.otherReason;
      }

      editAbnormal(abnormalIds, abnormalReason, feedback).then(res => {
        if(res.data.success !== true) {
          return;
        }
        this.submitLoading = false;
        this.$message.success("操作成功");
        this.closeDialog();
        this.initData();
      });
    },

    // 返回督办代办页面
    toAbnormalMonitor() {
      this.$store.commit("SET_GISID", {
        value: this.nodeId
      });
      this.$router.push({
        path: "loam/handleAbnormal/handleAbnormal"
      });
    },

    // 审核通过、审核驳回
    submitTask(passNum) {
      if(this.content === "") {
        this.$message.warning("请输入处理内容！");
        return;
      }
      let that = this;
      this.submitTaskLoading = true;
      var task = {
        abnormalReportId: this.id,
        processInstanceId: this.abnormalData.processInstanceId,
        taskId: this.abnormalData.taskId,
        comment: this.content,
        pass: passNum
      };
      
      handleAbnormal(task).then(res => {
        if(res.data.success !== true) {
          return;
        }
        that.submitTaskLoading = false;
        that.$message.success("处理成功！");
        that.initData();
        that.toAbnormalMonitor();
      });
    }

  }
};
</script>

<style lang="scss">
.abnormalInfo {
  .avue-crud__pagination {
    display: none;
  }

  .avue-crud__menu {
    min-height: unset !important;
  }
}
</style>

<style lang="scss" scoped>
.abnormalInfo {
  height: calc(100% - 40px);
}

h2 {
  margin: 0px;
  text-align: center;
}

.data_title {
  font-size: 16px;
  margin: 10px 0px;
}

.abnormal_count{
  color: red;
}

.reason_form {
  margin: 0px 0px 20px 0px;
}

.other_reason {
  margin-top: 10px;
}

.timelineBox {
  border: 1px solid #ebeef5;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
}
</style>